<!--
 * @Author: chenhaoran
 * @Date: 2024-08-08 17:19:26
 * @LastEditors: chenhaoran
 * @LastEditTime: 2024-08-08 18:48:12
-->
<template>
  <div class="other-card">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="card">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :icon="activity.icon"
              :type="activity.type"
              :color="activity.color"
              :size="activity.size"
              :hollow="activity.hollow"
              :timestamp="activity.timestamp"
            >{{ activity.content }}</el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="card">
          <div id="map-chart" class="chart"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="card">
          <div class="rank-item" v-for="(item, index) in rankList" :key="index">
            <div class="index">{{ index + 1 }}</div>
            <div class="content">
              <div class="text">
                <span>{{ item.name }}</span>
                <span>销量：{{ item.sales }}</span>
              </div>
              <div class="process">
                <el-progress
                  :percentage="item.percent"
                  striped
                  striped-flow
                  :color="getProcessColor(item.percent)"
                  :stroke-width="15"
                  :show-text="false"
                  :duration="12"
                />
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import api from '@/api/home.js'
import * as echarts from 'echarts/core';
import { use, registerMap } from 'echarts/core';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
  VisualMapComponent 
} from 'echarts/components';
import { MapChart } from 'echarts/charts';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
import chinaMap from '@/utils/china'
// 注册必须的组件
use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LegendComponent,
  MapChart,
  VisualMapComponent 
]);
registerMap('china', chinaMap)

const rankList = ref([])
const activities = [
  {
    content: 'Custom icon',
    timestamp: '2018-04-12 20:46',
    size: 'large',
    type: 'primary',
  },
  {
    content: 'Custom color',
    timestamp: '2018-04-03 20:46',
    color: '#0bbd87',
  },
  {
    content: 'Custom size',
    timestamp: '2018-04-03 20:46',
    size: 'large',
  },
  {
    content: 'Custom hollow',
    timestamp: '2018-04-03 20:46',
    type: 'primary',
    hollow: true,
  },
  {
    content: 'Default node',
    timestamp: '2018-04-03 20:46',
  },
]
const getRankList = () => {
  api.getRankList().then((res) => {
    if (res.code === 200) {
      rankList.value = res.data
    }
  })
}
getRankList()
const getProcessColor = (percent) => {
  if (percent >= 90) {
    return '#67c23a'
  } else if (percent >= 80) {
    return '#20a0ff'
  } else if (percent >= 60) {
    return '#E6A23C'
  } else {
    return '#F56C6C'
  }
}
onMounted(() => {
  var mapChart = echarts.init(document.getElementById('map-chart'))
  mapChart.setOption({
    tooltip: {
        trigger: 'item',
    },
    geo: {
        map: 'china',
        roam: false,
        emphasis: {
            label: {
                show: false,
            },
        },
    },
    visualMap: {
        show: false,
        min: 0,
        max: 100,
        realtime: false,
        calculable: false,
        inRange: {
            color: ['#d2e0f5', '#71A9FF'],
        },
    },
    series: [
        {
            geoIndex: 0,
            name: '地域分布',
            type: 'map',
            coordinateSystem: 'geo',
            map: 'china',
            data: [
                { name: '北京', value: 100 },
                { name: '上海', value: 100 },
                { name: '广东', value: 100 },
                { name: '浙江', value: 90 },
                { name: '江西', value: 80 },
                { name: '山东', value: 70 },
                { name: '广西', value: 60 },
                { name: '河南', value: 50 },
                { name: '河南', value: 40 },
                { name: '青海', value: 70 },
                { name: '河南', value: 30 },
                { name: '黑龙江', value: 20 },
                { name: '新疆', value: 20 },
                { name: '云南', value: 20 },
                { name: '甘肃', value: 20 },
            ],
        },
    ],
})
})
</script>
<style lang="scss" scoped>
.card {
  height: 400px;
  // padding: 0;
}
#map-chart {
    width: 100%;
    height: 350px;
}
.rank-item {
  display: flex;
  width: 100%;
  margin-bottom: 14px;
  .index {
    width: 50px;
    height: 45px;
    margin-right: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f2f2;
  }
  .content {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .text {
    display: flex;
    justify-content: space-between;
  }
  .process {
    margin-top: 8px;
  }
}
</style>